<template>
    <div class="box">
        <div class="box-header">
            <div class="title">
                <img style="width:65px;height:50px;margin:0 20px 0 0" src="../../assets/image/logo2.png" alt="logo" />
                <h1 class="text-center">
                    <small><span>{{ $t('webAuto.BusinessProcessManagement') }}</span></small>
                </h1>
            </div>
            <div class="container-fluid">
                <div class="tab">
                    <div class="tab-item on">{{ $t('calendar.login') }}</div>
                </div>
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="auto" class="demo-ruleForm">
                    <el-form-item prop="pass">
                        <el-input v-model="ruleForm.name" :placeholder="$t('webAuto.enterUserName')" :suffix-icon="Avatar" />
                    </el-form-item>
                    <el-form-item prop="checkPass">
                        <el-input v-model="ruleForm.pass" type="password" autocomplete="off" :placeholder="$t('webAuto.PleaseInputPassword')"
                            :suffix-icon="Briefcase" />
                    </el-form-item>
                    <el-form-item prop="type">
                        <el-checkbox v-model="data.type">{{ $t('webAuto.RememberLoginName') }}</el-checkbox>
                    </el-form-item>
                </el-form>
                <el-button class="buttons" style="width:100%;" type="primary" @click="submitLongin">
                    {{ $t('calendar.login') }}
                </el-button>
                <!-- 多语言 -->
                <div class="language">
                    <div  v-for="(item, index) in languageList" :key="index" :class="langIndex==index?'language-item':'language-item2 language-item'" @click="changeLanguage(index)">
                        <img class="icon" src="../../assets/language/china.png" alt="china" v-if="index==0"/>
                        <img class="icon" src="../../assets/language/MG.png" alt="china" v-if="index==1"/>
                        <img class="icon" src="../../assets/language/MXG.png" alt="china" v-if="index==2"/>
                        <span class="text">{{item}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive,ref,computed, onMounted } from "vue";
import { Avatar, Briefcase } from '@element-plus/icons-vue'
import roleApi from '@/api/role'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import {getLang} from '@/i18n/index'

const { t } = useI18n();

const route = useRoute();
const router = useRouter();
const store = useStore();
const langIndex = ref()
let langTypes = ["中文", "English", "español"]
let languageList = computed(() => {
    return ["中文", "English", "español"]
})

const data = reactive({
    type: false,
    roles: localStorage.getItem('roles') || '', // 角色判断显示权限
    code:''
})
const ruleForm = reactive({
    name: '',
    pass: ''
})

onMounted(() => {
    queryString()
    // 语言切换
    let langType =localStorage.getItem('lang')
    // let type=langType=='zh_CN'?'中文':langType=='en_US'?'English':'español'
	langIndex.value = langTypes.findIndex(x => x == langType)
    // getLang(type)
})

// 免密登录
const queryString=()=> {
      var params = new URLSearchParams(window.location.href.split("?")[1])
      data.code = params.get('code')
      if (data.code) {
        roleApi.getUserinfo(data.code).then(rsp => {
          if (rsp.status == 200) {
            let user = {
              id: rsp.data.userId,
              name: rsp.data.userName,
              deptName: rsp.data.position,
              avatar: rsp.data.avatar,
              position: rsp.data.position,
              type: 'user',
            }
            localStorage.setItem('roles', rsp.data.roles)
            // $store.state.loginUser = user
            store.commit('rolesAdd', JSON.stringify(data.roles));
            // // 添加用户信息到vuex
            store.commit('loginUserAdd', user);
            // 用户相关信息
            localStorage.setItem('loginUser', JSON.stringify(user))
            localStorage.setItem('wflow-token', rsp.data.token)
            // 登陆给默认语言中文
            localStorage.setItem('lang', '中文')
            router.replace('/home')
          }
        }).catch(err => {
          return err
        })
      }
    }

const submitLongin = () => {
    // var params = new URLSearchParams(window.location.href.split("?")[1])
    // let code = params.get('code')
    if (data.type) {
        localStorage.setItem('userName', ruleForm.name)
    }
    if (ruleForm.name.length == 0 || ruleForm.pass.length == 0) {
        ElMessage.error(t('webAuto.enterCorrectly'))
        return
    } else {
        roleApi.loginPage({
            username: ruleForm.name,
            password: ruleForm.pass
        }).then(rsp => {
            let user = {
                id: rsp.data.userId,
                name: rsp.data.userName,
                deptName: rsp.data.position,
                avatar: rsp.data.avatar,
                position: rsp.data.position,
                type: 'user',
            }
            // 设置角色权限
            console.log(rsp.data)
            // data.roles = rsp.data.roles[0].replace(/\"/g, "")
            localStorage.setItem('roles', rsp.data.roles)
            localStorage.setItem('menus', rsp.data.menus)
            // $store.state.loginUser = user
            store.commit('rolesAdd', JSON.stringify(rsp.data.roles));
            store.commit('menusAdd', JSON.stringify(rsp.data.menus));
            // 添加用户信息到vuex
            store.commit('loginUserAdd', user);
            store.commit('selectIndexAdd', 0)
            localStorage.setItem('selectIndex', 0)
            // 用户相关信息
            localStorage.setItem('loginUser', JSON.stringify(user))
            localStorage.setItem('wflow-token', rsp.data.token)
            router.replace('/home')
        }).catch(err => {
            // ElMessage.error(err.message)
        })
    }

}
// 多语言切换
const changeLanguage = (index) => {
    console.log(index,'index')
    langIndex.value = index
    // localStorage.setItem('langIndex',langIndex)
    let type = langTypes[index];

    localStorage.setItem('lang', type)

    getLang(type)
}
</script>

<style scoped lang="less">
@import "index.less";
</style>
